<template>
<div>
    <div id="Box">
      
      <div class="title"> 
        系统默认(6)
      </div>
      <!-- //本地图片 -->
      <div class="BackImageBox"  v-for="item in BackImages" :key="item.id" @click="previewImageOn(item)">
        <img :src="require('@/assets/default/background/'+item.src)" class="BackImage"/>
        <div v-if="item.label == BackImage.label" class="activeBox flex">
          <font-awesome-icon icon="circle-check" class="icon" />
        </div>
      </div>

       <div class="title" v-if="UploadImageList.length>0">
         用户自定义({{UploadImageList.length}})
      </div>
   
        <!-- 用户上传的图片-->
      <div class="BackImageBox"  v-for="item in UploadImageList" :key="item.lable" @click="previewImageOn(item)">
        <img :src="item.src" class="BackImage" />
        <div v-if="item.label == BackImage.label" class="activeBox flex">
          <font-awesome-icon icon="circle-check" class="icon" />
        </div>
      </div>


      <!-- 上传的图片 -->
      <div class="BackImageBox flex AddImage" v-if="UploadImageList.length<=2">
        <img :src="require('@/assets/default/background/Back1.jpg')" style="opacity: 0" class="BackImage"/>
        <div class="activeBox flex">
          <input type="file" ref="uploadImage"  @change="changeFile" style="display:none"/>
          <font-awesome-icon icon="circle-plus" class="icon" @click="uploadImage"/>
        </div>
      </div>
     
      <!-- 预览 -->
      <transition name="fadeInHeight">
      
        <div ref="PreviewImage" class="PreviewImage flex" v-if="PreviewImage.state">
            <font-awesome-icon icon="xmark" class="icon exit" @click="PreviewImage.state=false"/> 
            <img :src="require('@/assets/default/background/'+PreviewImage.src)" v-if="PreviewImage.type==1" >
            <img :src="PreviewImage.src" v-else >
            <div id="Funs">
                <font-awesome-icon icon="image" class="Fun" @click="SetBackImage_(PreviewImage)" 
                                  v-if="PreviewImage.label!= BackImage.label"/> 
              
                <font-awesome-icon icon="trash-can" class="Fun"  @click="DeleteBackImage_(PreviewImage)" 
                                  v-if="PreviewImage.type==2" /> 
                
            </div>

        </div>
      </transition>
    </div>

</div>
</template>
<script>
import { uuid } from 'vue-uuid';
import { mapState, mapMutations } from "vuex";
export default {
  name: "",
  data() {
    return {
    
      UploadImageList:[],
      AddImageSrc: null,
      PreviewImage:{
        state:false,
        src:null,
        label:null,
        type:1,
      }
    }
  },
  computed: {
    ...mapState("Setting", ["BackImage","BackImages"]),
  },
  mounted() {
     this.UploadImageList=JSON.parse(localStorage.getItem(`UploadImageList`)) || []
  },
  methods: {
    ...mapMutations("Setting", ["SETBACKIMAGE"]),
     uploadImage(){ this.$refs.uploadImage.click() },
    changeFile(e) {
      if(this.UploadImageList.length>3) 
       { 
          e.target.value=''
          e.target.type = 'file' ;
         return  this.$message.error('用户最多只能上传四张背景图片噢!')
      }
      const fileUploadLimit = 1 * 1024 *1024; 
      let file = e.target.files[0];
      let id=uuid.v1()
      if (file.size <= fileUploadLimit) {
       const reader = new FileReader();
         reader.onloadend = () => {
          let image= { 
             label: `UploadImageList:`+(this.UploadImageList.length+1)||1,
             name: "MTBlogImage", 
             timestamp: Date.now(),
             src: reader.result.toString()
         }
          let imgaeList=JSON.parse(localStorage.getItem(`UploadImageList`)) || []
          imgaeList.push(image)
          try{
            localStorage.setItem(`UploadImageList`,JSON.stringify(imgaeList))
          }catch(error ){ 
              e.target.value=''
              e.target.type = 'file' ;
              return this.$message.error('缓存已到达峰值')
             }
          let data={content:'增加图片成功',type:'success',duration:1}
          this.$public.AddInform(data)
          this.UploadImageList=JSON.parse(localStorage.getItem(`UploadImageList`)) || []
       }
       reader.readAsDataURL(file)
 
    } else this.$message.error('图片太大了噢')
       e.target.value=''
       e.target.type = 'file' ;
    },
    previewImageOn(item){
       this.PreviewImage.state=true
       this.PreviewImage.src=item.src
       this.PreviewImage.label=item.label
       if(item.id)
       this.PreviewImage.type=1
       else this.PreviewImage.type=2
    },
    SetBackImage_(item){
       let informData={content:'成功修改背景图片',type:'success',icon:'image',FAI:true}
       this.$public.AddInform(informData)
       this.SETBACKIMAGE(item)
       this.PreviewImage.state=false
    },
    DeleteBackImage_(item){
       this.UploadImageList=this.UploadImageList.filter(image =>item.label != image.label)
       
       if(this.UploadImageList.length==0)
          localStorage.removeItem(`UploadImageList`)
       else localStorage.setItem(`UploadImageList`,JSON.stringify(this.UploadImageList))
       let informData={content:'成功删除背景图片',type:'danger',icon:'trash-can',FAI:true}
       this.$public.AddInform(informData)
       this.PreviewImage.state=false
    }
  },
}
</script>

<style scoped lang='less'>
.exit{
    font-size: 30px;
}
.title{
    width: 100%;
    font-size: 25px;
    margin: 5px;
     color: var(--fontColor);
}
.PreviewImage{
    z-index: 10;
    position: absolute;
    top: 50%;left: 50%;
    transform: translate(-50%,-50%);
    width: 100%;
    height: 100%;  
    background: var(--GeneralBackColor-half); 
    overflow: hidden;


    img{
        width: 100%;
        max-width: calc(100% - 140px );
        max-height: calc(100% - 140px );
        object-fit: cover;
    }
    #Funs{
        position: absolute;
        left: 70px;
        bottom: 10px;

        .Fun{
            margin: 5px;
            width: 30px;height: 30px;
            padding: 10px;
            color: white;
            border-radius: 50%;
            background: rgba(0, 0, 0, 0.5) ;
        }
        .Fun:hover{
          // background: var(--GeneralBackColor-half);
             color: var(--GeneralBackColor);
        }
    }
    .exit{
        width: 30px;height: 30px;
        color: white;
        
    }
    .exit:hover{
         background: rgba(0, 0, 0, 0.5) ;
         border-radius: 50%;
    }
}
#Box {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
}
.BackImageBox {
  width: 30%;
  min-width: 200px;
  max-width: 500px;
  margin: 5px;


  border-radius: 5px;
  display: flex;
  position: relative;
  overflow: hidden;
}
.BackImage {
  width: 100%;
  object-fit: cover;
  border-radius: 5px;
   transition-duration: 1s;
 
}
.BackImage:hover {
   transform: scale(1.5);
   transition-duration: 1s;
}
.active {
  position: relative;
  z-index: 0;
}
.activeBox {
  position: absolute;
  top: 0;
  left: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 1;
  width: 100%;
  height: 100%;

  .icon {
    color: white;
    width: 40%;
    height: 40%;
  }
}

.AddImage {
  .activeBox {
    background-color: var(--GeneralBackColor);
    filter: brightness(0.9);
  }
}
</style>